<template>
    <!-- 上面大的消息层 -->
    <view class="msg-content">
        <view class="msg-item" v-for="(msg, index) in chatMessages" :key="index">
            <view class="msg-container-left">
                <image :src="msg.avatar" class="avatar" mode="aspectFit"></image>
                <view class="msg-info">
                    <view class="nickname-level-gender">
                        <span class="nickname">{{ msg.nickname }}</span>
                        <span class="level">(Lv.{{ msg.level }})</span>
                        <image :src="msg.gender ==='male'? 'https://img.icons8.com/color/16/000000/male.png' : 'https://img.icons8.com/color/16/000000/female.png'" class="gender-icon" mode="aspectFit"></image>
                    </view>
                    <view class="msg-bubble" :class="msg.isMe? 'msg-bubble-right' :'msg-bubble-left'">
                        <view class="content">{{ msg.content }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
	
export default {
    name: "WorldChatBox",
    data() {
        return {
            chatMessages: [
                { 
                    isMe: false, 
                    avatar: "https://picsum.photos/30/30", 
                    nickname: "好友A", 
                    level: 10,
                    gender: "male",
                    content: "你好呀！" 
                },
                { 
                    isMe: true, 
                    avatar: "https://picsum.photos/30/30", 
                    nickname: "一个大西瓜2", 
                    level: 15,
                    gender: "female",
                    content: "你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈你好哈哈哈哈哈哈哈" 
                },
                { 
                    isMe: false, 
                    avatar: "https://picsum.photos/30/30", 
                    nickname: "好友A", 
                    level: 10,
                    gender: "male",
                    content: "还不错，你呢？" 
                }
            ]
        };
    }
};
</script>

<style scoped>
.msg-content {
    width: 200px;
    height: 300px;
    padding: 5px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    overflow-y: auto;
}

.msg-item {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
}

.msg-container-left {
    display: flex;
    align-items: flex-start;
}

.msg-container-right {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 5px;
}

.msg-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 40px);
    width: fit-content; /* 添加这一行 */
}

.msg-container-right .msg-info {
    align-items: flex-end;
}

.nickname-level-gender {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.nickname {
    font-size: 10px;
    color: #ccc;
    margin-right: 3px;
}

.level {
    font-size: 10px;
    color: #ccc;
    margin-right: 3px;
}

.gender-icon {
    width: 16px;
    height: 16px;
}

.msg-bubble {
    padding: 8px;
    border-radius: 8px;
    max-width: 100%;
    word-wrap: break-word;
    position: relative;
}

.msg-bubble-left {
    background-color: #555;
}

.msg-bubble-right {
    background-color: #007aff;
}

.content {
    font-size: 12px;
}
</style>